<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--左侧面板-->
      <el-col :span="6" :xs="24">
        <!-- 部门数据 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>部门列表</span>
          </div>
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
        
        <!-- 巡逻区域列表 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>巡逻区域</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshAreaList">刷新</el-button>
          </div>
          <div class="area-list-container">
            <el-input
              v-model="areaSearchText"
              placeholder="搜索区域"
              prefix-icon="el-icon-search"
              clearable
              size="small"
              style="margin-bottom: 15px"
            />
            <div class="area-list">
              <div
                v-for="area in filteredAreaList"
                :key="area.areaId"
                class="area-item"
                :class="{ 'active': selectedArea && selectedArea.areaId === area.areaId }"
                @click="selectArea(area)"
              >
                <div class="area-info">
                  <div class="area-name">{{ area.areaName }}</div>
                  <div class="area-details">
                    <el-tag size="mini" :type="area.areaType === 1 ? 'primary' : 'danger'">
                      {{ area.areaType === 1 ? '常规区域' : '重点区域' }}
                    </el-tag>
                    <span class="area-dept">{{ area.deptName || '未知部门' }}</span>
                  </div>
                  <div class="area-users">
                    <span class="user-count">{{ getAreaUserCount(area.areaId) }} 名人员</span>
                  </div>
                </div>
                <div class="area-status">
                  <el-tag size="mini" :type="area.status === '0' ? 'success' : 'info'">
                    {{ area.status === '0' ? '正常' : '停用' }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 区域用户列表 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>区域人员</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshUserList">刷新</el-button>
          </div>
          <div class="user-list-container">
            <el-input
              v-model="userSearchText"
              placeholder="搜索用户"
              prefix-icon="el-icon-search"
              clearable
              size="small"
              style="margin-bottom: 15px"
            />
            <div class="user-list">
              <div
                v-for="user in filteredUserList"
                :key="user.userId"
                class="user-item"
                :class="{ 'active': selectedUser && selectedUser.userId === user.userId }"
                @click="selectUser(user)"
              >
                <div class="user-info">
                  <div class="user-name">{{ user.nickName || user.userName }}</div>
                  <div class="user-details">
                    <span class="user-dept">{{ user.dept ? user.dept.deptName : '' }}</span>
                    <el-tag size="mini" :type="user.assignType === 1 ? 'warning' : 'info'" style="margin-left: 5px;">
                      {{ user.assignType === 1 ? '负责人' : '协助' }}
                    </el-tag>
                  </div>
                </div>
                <div class="user-status">
                  <el-tag size="mini" :type="user.status === '0' ? 'success' : 'info'">
                    {{ user.status === '0' ? '在线' : '离线' }}
                  </el-tag>
                </div>
                <el-button type="text" size="mini" style="margin-left:8px;" @click.stop="showTrackById(user.userId)">查看轨迹</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧地图区域 -->
      <el-col :span="18">
        <div class="map-container" ref="mapContainer"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { listUser, deptTreeSelect } from "@/api/system/user";
import { listPatrolArea } from "@/api/system/patrolArea";
import { getUsersByAreaId } from "@/api/system/patrolAreaUser";

export default {
  name: 'DutyMonitor',
  data() {
    return {
      map: null,
      markers: [],
      polygons: [], // 巡逻区域多边形
      // 部门相关
      deptName: undefined,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 巡逻区域相关
      areaList: [],
      areaSearchText: '',
      selectedArea: null,
      areaUsers: {}, // 存储每个区域的用户 {areaId: [users]}
      // 用户相关
      userList: [],
      userSearchText: '',
      selectedUser: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      polyline: null, // 当前轨迹线
      trackPoints: [], // 当前轨迹点
      currentTrack: null, // 当前轨迹用户
      trackInfo: {
        totalDistance: 0,
        patrolTime: 0,
        stayPoints: 0
      },
    };
  },
  computed: {
    filteredAreaList() {
      if (!this.areaSearchText) {
        return this.areaList;
      }
      return this.areaList.filter(area => 
        (area.areaName && area.areaName.includes(this.areaSearchText)) ||
        (area.deptName && area.deptName.includes(this.areaSearchText))
      );
    },
    filteredUserList() {
      if (!this.userSearchText) {
        return this.userList;
      }
      return this.userList.filter(user => 
        (user.nickName && user.nickName.includes(this.userSearchText)) ||
        (user.userName && user.userName.includes(this.userSearchText)) ||
        (user.dept && user.dept.deptName && user.dept.deptName.includes(this.userSearchText))
      );
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.initMap();
    this.getDeptTree();
    this.getAreaList();
    window.showTrack = this.showTrackById.bind(this);
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    async initMap() {
      try {
        // 加载高德地图
        const AMap = await AMapLoader.load({
          key: '4b98d24146ee2f4b43cc046b7886cb71',
          version: '2.0',
          plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation']
        });

        // 创建地图实例
        this.map = new AMap.Map(this.$refs.mapContainer, {
          zoom: 12,
          center: [114.085947, 22.547],
          viewMode: '3D'
        });

        // 添加地图控件
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.HawkEye({isOpen: true}));
        this.map.addControl(new AMap.MapType());
        this.map.addControl(new AMap.Geolocation());

        // 添加用户标记点和巡逻区域
        this.addUserMarkers();
        this.addAreaPolygons();
      } catch (e) {
        console.error('地图加载失败', e);
      }
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询巡逻区域列表 */
    getAreaList() {
      listPatrolArea({ pageSize: 1000 }).then(response => {
        this.areaList = response.rows;
        this.addAreaPolygons();
        // 获取每个区域的用户数量
        this.areaList.forEach(area => {
          this.getAreaUsers(area.areaId);
        });
      });
    },
    /** 获取区域用户 */
    getAreaUsers(areaId) {
      getUsersByAreaId(areaId).then(response => {
        const areaUserList = response.data || [];
        // 将PatrolAreaUserVo转换为用户显示格式
        const users = areaUserList.map(item => ({
          userId: item.userId,
          userName: item.userName,
          nickName: item.nickName,
          dept: { deptName: item.deptName },
          status: '0', // 默认在线状态
          phonenumber: '', // 如果需要可以从用户服务获取
          assignType: item.assignType,
          position: null // 位置信息需要另外获取
        }));
        this.$set(this.areaUsers, areaId, users);
        
        // 如果当前选中的是这个区域，更新用户列表
        if (this.selectedArea && this.selectedArea.areaId === areaId) {
          this.userList = users;
          // 为区域内的用户生成位置
          this.generateUserPositionsInArea(areaId, users);
          this.addUserMarkers();
          // 调整地图视野以包含所有用户
          this.adjustMapViewToIncludeUsers(users);
        }
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      // 移除获取用户列表，因为用户显示基于巡逻区域分配
      // this.getUserList();
    },
    // 选择巡逻区域
    selectArea(area) {
      this.selectedArea = area;
      this.selectedUser = null;
      
      // 获取该区域的用户
      this.getAreaUsers(area.areaId);
      
      // 在地图上定位区域
      if (area.area && area.area !== '[]') {
        try {
          const coordinates = JSON.parse(area.area);
          if (coordinates && coordinates.length > 0) {
            // 计算区域中心点
            const center = this.calculatePolygonCenter(coordinates);
            this.map.setCenter(center);
            this.map.setZoom(13); // 调整缩放级别以更好地显示区域
          }
        } catch (e) {
          console.error('解析区域坐标失败', e);
        }
      }
    },
    // 选择用户
    selectUser(user) {
      this.selectedUser = user;
      // 在地图上定位用户
      if (user.position) {
        this.map.setCenter(user.position);
        this.map.setZoom(16); // 放大一点以便更好地查看用户位置
      } else {
        // 如果没有位置信息，使用默认位置
        const defaultPosition = [114.085947, 22.547];
        this.map.setCenter(defaultPosition);
        this.map.setZoom(12);
      }
    },
    // 刷新区域列表
    refreshAreaList() {
      this.getAreaList();
    },
    // 刷新用户列表
    refreshUserList() {
      if (this.selectedArea) {
        this.getAreaUsers(this.selectedArea.areaId);
      } else {
        // 如果没有选择区域，清空用户列表
        this.userList = [];
      }
    },
    // 获取区域用户数量
    getAreaUserCount(areaId) {
      return this.areaUsers[areaId] ? this.areaUsers[areaId].length : 0;
    },
    // 计算多边形中心点
    calculatePolygonCenter(coordinates) {
      if (!coordinates || coordinates.length === 0) {
        return [114.085947, 22.547];
      }
      
      let sumX = 0, sumY = 0;
      coordinates.forEach(coord => {
        sumX += coord[0];
        sumY += coord[1];
      });
      
      return [sumX / coordinates.length, sumY / coordinates.length];
    },
    // 添加巡逻区域多边形
    addAreaPolygons() {
      if (!this.map) return;
      
      // 清除现有多边形
      this.polygons.forEach(polygon => {
        polygon.setMap(null);
      });
      this.polygons = [];

      // 为每个区域添加多边形
      this.areaList.forEach(area => {
        if (area.area && area.area !== '[]') {
          try {
            const coordinates = JSON.parse(area.area);
            if (coordinates && coordinates.length > 2) {
              const polygon = new AMap.Polygon({
                path: coordinates,
                strokeColor: area.areaType === 1 ? '#1890ff' : '#ff4d4f',
                strokeWeight: 2,
                strokeOpacity: 0.8,
                fillColor: area.areaType === 1 ? '#1890ff' : '#ff4d4f',
                fillOpacity: 0.1,
                zIndex: 10
              });

              const infoWindow = new AMap.InfoWindow({
                content: `
                  <div class="info-window">
                    <h4>${area.areaName}</h4>
                    <p>类型：${area.areaType === 1 ? '常规区域' : '重点区域'}</p>
                    <p>部门：${area.deptName || '未知'}</p>
                    <p>人员：${this.getAreaUserCount(area.areaId)} 名</p>
                    <p>状态：${area.status === '0' ? '正常' : '停用'}</p>
                  </div>
                `,
                offset: new AMap.Pixel(0, -30)
              });

              polygon.on('click', () => {
                infoWindow.open(this.map, polygon.getPath()[0]);
                this.selectArea(area);
              });

              polygon.setMap(this.map);
              this.polygons.push(polygon);
            }
          } catch (e) {
            console.error('解析区域坐标失败', e);
          }
        }
      });
    },
    addUserMarkers() {
      if (!this.map) return;
      
      // 清除现有标记
      this.markers.forEach(marker => {
        marker.setMap(null);
      });
      this.markers = [];

      // 为每个用户添加标记点
      this.userList.forEach(user => {
        // 使用已经生成的位置，如果没有则使用默认位置
        const position = user.position || [114.085947 + (Math.random() - 0.5) * 0.1, 22.547 + (Math.random() - 0.5) * 0.1];

        const marker = new AMap.Marker({
          position: position,
          icon: new AMap.Icon({
            size: new AMap.Size(40, 50),
            image: require('@/assets/images/Police.png'),
            imageSize: new AMap.Size(40, 50)
          }),
          offset: new AMap.Pixel(-20, -50)
        });
  // <p>部门：${user.dept ? user.dept.deptName : '未知'}</p>
              // <p>状态：${user.status === '0' ? '在线' : '离线'}</p>
              // <p>手机：${user.phonenumber || '未知'}</p>
        const infoWindow = new AMap.InfoWindow({
          content: `
            <div class="info-window">
              <h4>${user.nickName || user.userName}</h4>
            
              ${user.assignType ? `<p>职责：${user.assignType === 1 ? '负责人' : '协助人员'}</p>` : ''}
            </div>
          `,
          offset: new AMap.Pixel(0, -30)
        });

        marker.on('click', () => {
          infoWindow.open(this.map, marker.getPosition());
          this.selectUser(user);
        });

        marker.setMap(this.map);
        this.markers.push(marker);

        // 保存用户位置信息（如果还没有的话）
        if (!user.position) {
          user.position = position;
        }
      });
    },
    // 为区域内的用户生成位置
    generateUserPositionsInArea(areaId, users) {
      // 找到对应的巡逻区域
      const area = this.areaList.find(a => a.areaId === areaId);
      if (!area || !area.area || area.area === '[]') {
        // 如果没有区域数据，使用默认位置
        users.forEach(user => {
          user.position = [114.085947 + (Math.random() - 0.5) * 0.1, 22.547 + (Math.random() - 0.5) * 0.1];
        });
        return;
      }

      try {
        const coordinates = JSON.parse(area.area);
        if (!coordinates || coordinates.length < 3) {
          // 如果坐标数据无效，使用默认位置
          users.forEach(user => {
            user.position = [114.085947 + (Math.random() - 0.5) * 0.1, 22.547 + (Math.random() - 0.5) * 0.1];
          });
          return;
        }

        // 为每个用户生成在区域内部的位置
        users.forEach((user, index) => {
          user.position = this.generatePointInPolygon(coordinates, index);
        });
      } catch (e) {
        console.error('解析区域坐标失败', e);
        // 解析失败时使用默认位置
        users.forEach(user => {
          user.position = [114.085947 + (Math.random() - 0.5) * 0.1, 22.547 + (Math.random() - 0.5) * 0.1];
        });
      }
    },
    // 在多边形内部生成点
    generatePointInPolygon(coordinates, index) {
      // 计算多边形的边界框
      let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
      coordinates.forEach(coord => {
        minX = Math.min(minX, coord[0]);
        maxX = Math.max(maxX, coord[0]);
        minY = Math.min(minY, coord[1]);
        maxY = Math.max(maxY, coord[1]);
      });

      // 使用种子随机数确保同一用户每次生成相同位置
      const seed = index * 1000 + this.selectedArea.areaId;
      let attempts = 0;
      const maxAttempts = 100;

      while (attempts < maxAttempts) {
        // 在边界框内随机生成点
        const x = minX + (this.seededRandom(seed + attempts) * (maxX - minX));
        const y = minY + (this.seededRandom(seed + attempts + 1) * (maxY - minY));

        // 检查点是否在多边形内部
        if (this.isPointInPolygon([x, y], coordinates)) {
          return [x, y];
        }
        attempts++;
      }

      // 如果无法生成内部点，返回多边形中心点
      return this.calculatePolygonCenter(coordinates);
    },
    // 检查点是否在多边形内部（射线法）
    isPointInPolygon(point, polygon) {
      const x = point[0];
      const y = point[1];
      let inside = false;

      for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
        const xi = polygon[i][0];
        const yi = polygon[i][1];
        const xj = polygon[j][0];
        const yj = polygon[j][1];

        if (((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
          inside = !inside;
        }
      }

      return inside;
    },
    // 种子随机数生成器
    seededRandom(seed) {
      const x = Math.sin(seed) * 10000;
      return x - Math.floor(x);
    },
    // 调整地图视野以包含所有用户
    adjustMapViewToIncludeUsers(users) {
      if (!this.map || users.length === 0) return;
      
      // 获取当前区域的坐标
      const area = this.selectedArea;
      if (!area || !area.area || area.area === '[]') return;
      
      try {
        const coordinates = JSON.parse(area.area);
        if (!coordinates || coordinates.length < 3) return;
        
        // 计算区域的边界框
        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
        coordinates.forEach(coord => {
          minX = Math.min(minX, coord[0]);
          maxX = Math.max(maxX, coord[0]);
          minY = Math.min(minY, coord[1]);
          maxY = Math.max(maxY, coord[1]);
        });
        
        // 添加一些边距
        const padding = 0.01; // 约1km的边距
        minX -= padding;
        maxX += padding;
        minY -= padding;
        maxY += padding;
        
        // 计算中心点和合适的缩放级别
        const center = [
          (minX + maxX) / 2,
          (minY + maxY) / 2
        ];
        
        // 根据区域大小调整缩放级别
        const width = maxX - minX;
        const height = maxY - minY;
        const maxDimension = Math.max(width, height);
        
        let zoom = 13; // 默认缩放级别
        if (maxDimension > 0.1) zoom = 10; // 大区域
        else if (maxDimension > 0.05) zoom = 11; // 中等区域
        else if (maxDimension > 0.02) zoom = 12; // 小区域
        else zoom = 14; // 很小区域
        
        this.map.setCenter(center);
        this.map.setZoom(zoom);
      } catch (e) {
        console.error('调整地图视野失败', e);
      }
    },
    showTrackById(userId) {
      const user = this.userList.find(u => u.userId == userId);
      if (!user) return;
      this.clearTrack();
      this.selectedUser = user;
      // 获取当前区域多边形
      const area = this.selectedArea;
      if (!area || !area.area || area.area === '[]') {
        this.$message.warning('未获取到巡逻区域，无法生成轨迹');
        return;
      }
      let polygon;
      try {
        polygon = JSON.parse(area.area);
      } catch (e) {
        this.$message.warning('巡逻区域数据异常');
        return;
      }
      if (!polygon || polygon.length < 3) {
        this.$message.warning('巡逻区域数据异常');
        return;
      }
      // 轨迹起点为用户当前位置或多边形中心
      const start = user.position || this.calculatePolygonCenter(polygon);
      // 生成轨迹点（30个点）
      const trackPoints = this.generateTrackInPolygon(polygon, start, 30);
      if (!trackPoints || trackPoints.length < 2) {
        this.$message.warning('轨迹生成失败');
        return;
      }
      this.trackPoints = trackPoints;
      this.currentTrack = { userId: user.userId };
      this.calculateTrackInfo(trackPoints);
      this.drawTrackLine(trackPoints);
      this.map.setFitView();
      this.$message.success(`已显示${user.nickName || user.userName}的轨迹信息`);
    },
    // 在多边形内生成轨迹点
    generateTrackInPolygon(polygon, start, count = 30) {
      const points = [];
      const center = this.calculatePolygonCenter(polygon);
      const radius = 0.002 + Math.random() * 0.002;
      let angle = Math.random() * 2 * Math.PI;
      for (let i = 0; i < count; i++) {
        angle += (Math.PI * 2) / count + (Math.random() - 0.5) * 0.2;
        const r = radius * (0.8 + Math.random() * 0.4);
        const x = center[0] + r * Math.cos(angle);
        const y = center[1] + r * Math.sin(angle);
        let pt = [x, y];
        if (!this.isPointInPolygon(pt, polygon)) {
          pt = center;
        }
        points.push(pt);
      }
      return points;
    },
    // 轨迹统计
    calculateTrackInfo(points) {
      let totalDistance = 0;
      const stayPoints = Math.floor(Math.random() * 5) + 2;
      for (let i = 1; i < points.length; i++) {
        const lat1 = points[i - 1][1];
        const lon1 = points[i - 1][0];
        const lat2 = points[i][1];
        const lon2 = points[i][0];
        const distance = Math.sqrt(
          Math.pow((lat2 - lat1) * 111000, 2) +
          Math.pow((lon2 - lon1) * 111000 * Math.cos(lat1 * Math.PI / 180), 2)
        ) / 1000;
        totalDistance += distance;
      }
      this.trackInfo = {
        totalDistance: totalDistance.toFixed(2),
        patrolTime: (totalDistance * 0.5 + Math.random() * 2).toFixed(1),
        stayPoints: stayPoints
      };
    },
    // 轨迹绘制
    drawTrackLine(points) {
      if (!this.map) return;
      this.polyline = new AMap.Polyline({
        path: points,
        strokeColor: '#409EFF',
        strokeWeight: 4,
        strokeOpacity: 0.8,
        strokeStyle: 'solid'
      });
      this.polyline.setMap(this.map);
      // 起点终点
      const startMarker = new AMap.Marker({
        position: points[0],
        icon: new AMap.Icon({
          size: new AMap.Size(20, 20),
          image: '',
          imageSize: new AMap.Size(20, 20)
        })
      });
      const endMarker = new AMap.Marker({
        position: points[points.length - 1],
        icon: new AMap.Icon({
          size: new AMap.Size(20, 20),
          image: '',
          imageSize: new AMap.Size(20, 20)
        })
      });
      startMarker.setMap(this.map);
      endMarker.setMap(this.map);
      // 方向箭头
      for (let i = 0; i < points.length - 1; i += 2) {
        const midPoint = [
          (points[i][0] + points[i + 1][0]) / 2,
          (points[i][1] + points[i + 1][1]) / 2
        ];
        const arrowMarker = new AMap.Marker({
          position: midPoint,
          icon: new AMap.Icon({
            size: new AMap.Size(16, 16),
            image: '',
            imageSize: new AMap.Size(16, 16)
          })
        });
        arrowMarker.setMap(this.map);
      }
    },
    // 清除轨迹
    clearTrack() {
      if (this.polyline) {
        this.polyline.setMap(null);
        this.polyline = null;
      }
      this.map.clearMap();
      this.addUserMarkers();
      this.selectedUser = null;
      this.trackInfo = {
        totalDistance: 0,
        patrolTime: 0,
        stayPoints: 0
      };
    },
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 800px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.box-card {
  margin-bottom: 20px;
}

.head-container {
  margin-bottom: 10px;
}

.area-list-container,
.user-list-container {
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.area-list,
.user-list {
  flex: 1;
  overflow-y: auto;
}

.area-item,
.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: #f5f7fa;
  }

  &.active {
    background-color: #e6f7ff;
    border-left: 3px solid #1890ff;
  }
}

.area-info,
.user-info {
  flex: 1;
}

.area-name,
.user-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.area-details,
.user-details {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.area-dept,
.user-dept {
  font-size: 12px;
  color: #909399;
  margin-left: 5px;
}

.area-users {
  font-size: 12px;
  color: #606266;
}

.user-count {
  color: #1890ff;
}

.area-status,
.user-status {
  margin-left: 10px;
}

:deep(.info-window) {
  padding: 10px;
  
  h4 {
    margin: 0 0 10px 0;
    color: #303133;
  }
  
  p {
    margin: 5px 0;
    color: #606266;
  }
}
</style> 